<template>
  <div class="client-info">
    <a-card>
      <h2>客户基本信息</h2>
      <a-divider></a-divider>
      <add-customer :show="show" @setShow='setShow' v-if="show" @refresh="refresh" :initData="initData"></add-customer>
      <div class="search">
        <a-input-search placeholder="请根据客户名称进行搜索" enter-button v-model:value="keyword" @search="onSearch" />
        <a v-if="isSearch" href="javascript:;" @click="back">返回</a>
        <a-button type="primary" @click="show=true">新增客户</a-button>
      </div>
      <!-- style="width:1100px" -->
      <!-- :scroll="{ x:800, y: 300 }" -->
      <a-table bordered :columns="columns" :data-source="list" :pagination='false' :rowKey="(record,index)=> index" :scroll="{ x:800, y: 300 }">
        <template #cusType='{record}'>
          {{record.cusType==0?'潜在客户':record.cusType==1?'意向客户':record.cusType==2?'真正客户':'历史客户'}}
        </template>
        <template #satisfaction='{record}'>
          <a-rate :value="record.satisfaction" disabled />
        </template>
        <template #credit='{record}'>
          <a-rate :value="record.credit" disabled />
        </template>
        <template #actions='{record}'>
          <a href="javascript:;" @click="updateInfo(record)">更改&nbsp; </a>
           <a-popconfirm title="Are you sure？" ok-text="Yes" cancel-text="No" @confirm="remove(record)">
            <a href="javascript:;">删除</a>
          </a-popconfirm>

        </template>
      </a-table>
      <a-pagination v-if="!isSearch" v-model:current="current" :total="total" :page-size="5" @change="setPage"></a-pagination>
    </a-card>

  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import AddCustomer from "./components/AddCustomer.vue";
import { customer } from "@/service";
import { result } from "@/utils/result.js";
import { log } from "../../service";

export default defineComponent({
  components: {
    AddCustomer,
  },
  setup() {
    const columns = [
      {
        title: "客户名",
        dataIndex: "cusName",
        width: 100,
        fixed: "left",
      },
      {
        title: "法人",
        dataIndex: "legalPerson",
        width: 100,
      },
      {
        title: "省级行政区",
        dataIndex: "province",
        width: 120,
      },
      {
        title: "客户类型",
        slots: {
          customRender: "cusType",
        },
        width: 100,
      },
      {
        title: "满意度",
        slots: {
          customRender: "satisfaction",
        },
        width: 180,
      },
      {
        title: "信用度",
        slots: {
          customRender: "credit",
        },
        width: 180,
      },
      {
        title: "地址",
        dataIndex: "cusAddress",
        width: 100,
      },
      {
        title: "电话",
        dataIndex: "cusPhone",
        width: 100,
      },
      {
        title: "网站",
        dataIndex: "cusWebsite",
        width: 100,
      },
      {
        title: "注册资金",
        dataIndex: "cusFund",
        width: 100,
      },
      {
        title: "注册号",
        dataIndex: "cusLicence",
        width: 100,
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
        width: 100,
        fixed: "right",
      },
    ];

    const show = ref(false);
    const setShow = (payload) => {
      show.value = payload;
      getList();
    };

    const list = ref([]);
    const total = ref(0);
    const current = ref(1);
    const getList = async () => {
      const res = await customer.list(current.value, 5, keyword.value);
      if (res.data.code == 200) {
        // console.log(res.data);
        list.value = res.data.data.list;
        total.value = res.data.data.total;
        return;
      }
    };
    const setPage = async (page) => {
      // console.log("setPage", page);
      current.value = page;
      getList();
    };

    /**搜索 */
    const keyword = ref("");
    const isSearch = ref(false);
    const onSearch = () => {
      getList();
      console.log("keyword.value", keyword.value);
      if (keyword.value != "") {
        isSearch.value = true;
        console.log("isSearch.value", isSearch.value);
      }
    };
    //返回
    const back = () => {
      isSearch.value = false;
      keyword.value = "";
      getList();
    };

    //组件挂载做的事情
    onMounted(async () => {
      getList();
    });
    const refresh = () => {
      getList();
    };
    const remove = async ({ _id }) => {
      console.log("remove", _id);
      const res = await customer.remove(_id);
      if (res.data.code == 200) {
        message.success(res.data.msg);
        getList();
      }
    };

    /**更改操作 */
    const updateInfo = (record) => {
      show.value = true;
      console.log("打印update", record);
      initData.value = record;
    };
    const initData = ref({});

    return {
      columns,
      show, //添加一条弹框
      setShow,
      list,

      //分页数据

      refresh,
      back, //返回
      remove,
      onSearch,
      isSearch,
      keyword,

      //分页
      current,
      total,
      setPage,
      updateInfo,
      initData,
    };
  },
});
</script>

<style lang='less' scoped>
@import url("../../assets/styles/common.less");
@import url("./styles/common.less");
:deep(.ant-table) {
  border: 1px solid #f0f0f0;
  width: 100%;
  // overflow-x: auto;
  // overflow-y: a;
}

</style>